<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core " %>
<%@include file="./../../../taglibs.jsp"%>
<html>
<head>
    <%@include file="./../../../header.jsp"%>
</head>

	<body class="body">
		
		<div class="section">
			<div class="wrapper-md">
	       		<h1 class="fl" id="title">分类管理</h1>
	       		<div class="fr">
	       			<div class="def-btn-group">
	       				<button class="def-btn def-btn-primary" onclick="addNew()"><i class="gopng gopng_page"></i> 添加</button>
	       				<button class="def-btn def-btn-warm"><i class="gopng gopng_delete"></i> 删除</button>
	       			</div>
	       		</div>
	        </div>

			<div class="section-content">
				<form class="layui-form filterDiv" action="" method="">
					<div class="layui-inline">
						<label for="">分类名称：</label>
						<div class="layui-input-inline">
						    <input type="text" class="layui-input" />
				      	</div>
					</div>
					<button type="submit" class="def-btn def-btn-normal ml20"><i class="gopng gopng_search"></i> 查询</button>
				</form>
				<div class="layui-form">
					<table class="layui-table table-center table-blue" >
						<colgroup>
							<col width="50" />
							<col width="50" />
						</colgroup>
						<thead>
							<tr>
								<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
								<th>排序</th>
								<th>分类名称</th>
								<th>图标</th>
								<th>修改人</th>
								<th>修改时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="checkbox" name="" lay-skin="primary"></td>
								<td>1</td>
								<td>党群</td>
								<td></td>
								<td>王娜</td>
								<td>2016-11-30 15:03 </td>
								<td>
									<div class="def-breadcrumb">
										<span onclick="edit()">编辑</span>
										<span onclick="remove()">删除</span>
									</div>
								</td>
							</tr>
						
						</tbody>
					</table>
					
					<div class="text-right">
						<div id="page"></div>
					</div>
				</div>
			</div>
		</div>


		
		<!--新增弹框-->
		<script type="text/template" id="addNew_modal">
			<div class="modal_content modal_label_width">
				<form class="layui-form">
					<div class="layui-form-item">
				        <label class="layui-form-label">分类名称</label>
				        <div class="layui-input-block">
				            <input type="text" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">排序</label>
				        <div class="layui-input-block">
				            <input type="number" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			         <div class="layui-form-item">
				        <label class="layui-form-label">图标</label>
				        <div class="layui-input-block">
				           
				        </div>
			        </div>
				</form>
			</div>
		</script>
		<!--/ 新增弹框-->
		
		<!--编辑弹框-->
		<script type="text/template" id="edit_modal">
			<div class="modal_content modal_label_width">
				<form class="layui-form">
					<div class="layui-form-item">
				        <label class="layui-form-label">分类名称</label>
				        <div class="layui-input-block">
				            <input type="text" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">排序</label>
				        <div class="layui-input-block">
				            <input type="number" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			         <div class="layui-form-item">
				        <label class="layui-form-label">图标</label>
				        <div class="layui-input-block">
				           
				        </div>
			        </div>
				</form>
			</div>
		</script>
		<!--/ 编辑弹框-->

		<script type="text/javascript">
			
			var form = layui.form,
				layer = layui.layer,
				laypage = layui.laypage,
				layedit = layui.layedit,
				laydate = layui.laydate,
				layer = layui.layer
				
				form.render()
				
				laypage.render({
					elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
					,count: 50 //数据总数，从服务端得到
				    ,skin: '#1E9FFF'
				    ,skip: true
				});
				
			
			//删除
			function remove(){
				layer.confirm('您确定要删除吗？', {
					btn: ['删除', '取消'] //按钮
				}, function() {
					layer.msg('删除', {
						icon: 1
					});
				}, function() {
					layer.msg('取消', {
						icon: 2
					});
				});
			}
			

			
			//新增
			function addNew(){
				layer.open({
					type: 1,
					skin: 'layui-layer-demo', //样式类名
					anim: 2,
					title: '添加分类',
					closeBtn: 1, //不显示关闭按钮
					shadeClose: false, //开启遮罩关闭
					area: ['500px', '350px'],
					btn: ['确定'],
					yes: function(index, layero) { //按钮【按钮一】的回调
						alert('点击了确定')
						layer.close(index)		//关闭方法
					},
					content: $('#addNew_modal').html(),
					success:function(){
						form.render()
					}
				})
			}
			
			
			//修改
			function edit(){
				layer.open({
					type: 1,
					skin: 'layui-layer-demo', //样式类名
					anim: 2,
					title: '修改分类',
					closeBtn: 1, //不显示关闭按钮
					shadeClose: false, //开启遮罩关闭
					area: ['500px', '350px'],
					btn: ['确定'],
					yes: function(index, layero) { //按钮【按钮一】的回调
						alert('点击了确定')
						layer.close(index)		//关闭方法
					},
					content: $('#edit_modal').html(),
					success:function(){
						form.render()
					}
				})
			}

		</script>
	</body>
</html>